let left = document.querySelector(".left"),
    right = document.querySelector(".right"),
    img = document.querySelectorAll(".main >div"),
    sec = document.querySelectorAll(".sec > div"),
    imgl=img.length,
    num=0,//计数变量
    lastIndex=0,//上一个操作下标
    Timer;

// 下一张
// right.addEventListener("click",rt());
right.addEventListener("click",function (){
    num++;
    img[lastIndex].classList.remove("active");
    (num>imgl-1) && (num=0);
    img[num].classList.add("active");  
    lastIndex = num;
    console.log(num);
});

function rt(){
    console.log(num);
    num++;
    img[lastIndex].classList.remove("active");
    (num>imgl-1) && (num=0);
    img[num].classList.add("active");  
    lastIndex = num;
    console.log(num);
};

// 上一张
left.addEventListener("click",function (){
    img[lastIndex].classList.remove("active");
    num--;
     (num<0) && (num=imgl-1);
    img[num].classList.add("active");  
    lastIndex=num;
    console.log(num);
});

// 底部圆点
sec.forEach(function(val,index){
    // val.addEventListener("click",secFn(lastIndex,index))
    val.addEventListener("mouseover",function (){
        img[lastIndex].classList.remove("active");
        sec[lastIndex].classList.remove("active");
        img[index].classList.add("active");
        sec[index].classList.add("active");
        lastIndex=index;
    })
});

// function secFn(lastIndex, index){
//     img[lastIndex].classList.remove("active");
//     sec[lastIndex].classList.remove("active");
//     img[index].classList.add("active");
//     sec[index].classList.add("active");
//     lastIndex=index;
// };


// 自动
timer = setInterval(function(){
    rt();
},2000);

// 移入停止
carsouel.addEventListener("mouseover",function(){
    clearInterval("timer");
});
// 移出自动
carsouel.addEventListener("mouseout",function(){
    timer = setInterval(function(){
        rt();
    },2000);
});